import React, { useState } from 'react';

const AIChat: React.FC = () => {
  const [messages, setMessages] = useState([
    { 
      sender: 'assistant', 
      content: '你好！我是你的智能助手包包。有什么我可以帮助你的吗？' 
    }
  ]);
  const [input, setInput] = useState('');

  const handleSend = () => {
    if (!input.trim()) return;
    setMessages([...messages, { sender: 'user', content: input }]);
    // 模拟AI回复（实际项目中可对接API）
    setTimeout(() => {
      setMessages([...messages, { sender: 'user', content: input }, { sender: 'assistant', content: '这是AI的回复内容...' }]);
      setInput('');
    }, 1000);
  };

  return (
    <div
      style={{
        marginLeft: '60px',
        height: '100vh',
        backgroundColor: '#0f1e32',
        color: 'white',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {/* 头部标题 */}
      <div
        style={{
          padding: '16px',
          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <div style={{ fontSize: '18px', fontWeight: 'bold', color: 'cyan' }}>AI助手</div>
        <div style={{ display: 'flex', gap: '16px' }}>
          <button
            style={{
              background: 'transparent',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              color: 'white',
              borderRadius: '4px',
              padding: '4px 8px',
              cursor: 'pointer',
            }}
          >
            -
          </button>
          <button
            style={{
              background: 'transparent',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              color: 'white',
              borderRadius: '4px',
              padding: '4px 8px',
              cursor: 'pointer',
            }}
          >
            ×
          </button>
        </div>
      </div>

      {/* 聊天窗口 */}
      <div
        style={{
          flex: 1,
          padding: '16px',
          overflowY: 'auto',
          display: 'flex',
          flexDirection: 'column',
          gap: '16px',
        }}
      >
        {messages.map((msg, index) => (
          <div
            key={index}
            style={{
              maxWidth: '70%',
              alignSelf: msg.sender === 'assistant' ? 'flex-start' : 'flex-end',
              background: msg.sender === 'assistant' ? 'rgba(127, 92, 128, 0.1)' : 'rgba(255, 255, 255, 0.1)',
              padding: '8px 16px',
              borderRadius: '8px',
            }}
          >
            {msg.content}
          </div>
        ))}
      </div>

      {/* 输入区域 */}
      <div
        style={{
          padding: '16px',
          borderTop: '1px solid rgba(142, 136, 136, 0.1)',
          display: 'flex',
          gap: '8px',
        }}
      >
        <button
          style={{
            background: 'cyan',
            border: 'none',
            color: 'black',
            borderRadius: '4px',
            padding: '8px 12px',
            cursor: 'pointer',
          }}
        >
          🎙️
        </button>
        <input
          type="text"
          placeholder="请输入消息..."
          value={input}
          onChange={(e) => setInput(e.target.value)}
          style={{
            flex: 1,
            background: 'transparent',
            border: '1px solid cyan',
            color: 'white',
            borderRadius: '4px',
            padding: '8px',
            outline: 'none',
          }}
          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
        />
        <button
          onClick={handleSend}
          style={{
            background: 'cyan',
            border: 'none',
            color: 'black',
            borderRadius: '4px',
            padding: '8px 16px',
            cursor: 'pointer',
            fontWeight: 'bold',
          }}
        >
          发送
        </button>
      </div>
    </div>
  );
};

export default AIChat;